<template>
  <div style="width:500px;">
    <el-form
      :model="typeDate"
      :rules="rules"
      ref="loginForm"
      label-width="100px"
    >
      <el-form-item label="用户名" prop="state">
        <el-select v-model="typeDate.user_id" placeholder="请输入用户名">
          <el-option
            v-for="item in options"
            :key="item._id"
            :label="item.name"
            :value="item._id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="typeDate.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="充值金额" prop="money">
        <el-input
          v-model="typeDate.money"
          placeholder="请输入充值金额"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('loginForm')"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { addMoney } from "../../api/money";
import { allusers } from "../../api/user";
export default {
  name: "typeCreate",
  components: {},
  data() {
    return {
      typeDate: {},
      options: [],
      rules: {
        name: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur",
          },
        ],
        user_id: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur",
          },
        ],
        money: [
          {
            required: true,
            message: "金额不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    allusers().then((res) => {
      if (res.success) {
        this.options = res.result;
      }
    });
  },
  methods: {
    // 提交登录
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addMoney(this.typeDate).then((res) => {
            this.typeDate = {};
            this.$message({
              message: "添加成功",
              type: "success",
            });
          });
          // 发送请求
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style scoped></style>
